<script setup>
import { ref, reactive, onMounted, watch, watchEffect } from 'vue'
import axios from 'axios';
import { ElMessageBox } from "element-plus"

const potatoes = ref([])
const dialogVisible = ref(false)
const formData = ref({ })
const url = `/fapi/video`



const getTableData = () => {
    const multi_url = url+'/get_multi'
    axios.get(multi_url, { headers: { Authorization: 'Basic dTpw' } })
        .then(function ({ data }) {
            console.log(data);
            // console.log(data[0])
            potatoes.value = data['data']
        })
        .catch(function (error) {
            console.log(error);
        })
        .finally(function () {
        });
}

onMounted(() => {

    getTableData()

})

const handleDelete = (row) => {
    ElMessageBox.confirm(`正在删除用户：${row.id}，确认删除？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        var delUrl = url + '/' + row.id
        console.log(delUrl);
        axios.delete(delUrl,
            {
                headers: {
                    Authorization: 'Basic dTpw'
                }
            })
            .then(function (data) {
                console.log(data);
            })
            .catch(function (error) {
                console.log(error);
            })
        getTableData()
    })
}

const handleCreateOrUpdate = () => {
    console.log(formData.value)
    dialogVisible.value = false
    if (formData.value.id === undefined) {
        axios.post(url,
            formData.value,
            {
                headers:
                    { Authorization: 'Basic dTpw' }
            })
            .then(function (data) {
                console.log(data);
                getTableData()
            })
            .catch(function (error) {
                console.log(error);
            })
    } else {
        var updateUrl = url + '/update/' + formData.value.id
        console.log(updateUrl);
        axios.patch(updateUrl,
            formData.value,
            {
                headers:
                    { Authorization: 'Basic dTpw' }
            })
            .then(function (data) {
                console.log(data);
                getTableData()
            })
            .catch(function (error) {
                console.log(error);
            })
    }

}

const handleUpdate = (row) => {
    dialogVisible.value = true
    formData.value = Object.assign({}, row);
}

</script>

<template>
    <el-button type="primary" @click="dialogVisible = true">新增</el-button>

    <el-table :data="potatoes" border>
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="description" label="description" width="180" />
        <el-table-column prop="update_time" label="update_time" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
                <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
                <!-- <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">删除</el-button> -->
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="编辑" width="60%">
        <el-form :model="formData" label-width="100px" label-position="left">
            <el-form-item prop="description" label="description">
                <el-input v-model="formData.description" placeholder="请输入" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleCreateOrUpdate">确认</el-button>
        </template>
    </el-dialog>

</template>

<style scoped></style>